<template>
	<li>
		<a @click="show" :id="'u_' + model.uuid">
			<span v-text="model.uuid"></span>
			<Icon :id="'ios_' + model.uuid" style="position: absolute;top: 100%;left: 50%;z-index: 9;background: #FFFFFF;border-radius: 100%;border: 1px solid #ccc;transform: translate(-50%,-50%);" type="ios-add" size="17" color="#666" v-show="model.children.length > 0"></Icon>
		</a>
		<ul v-show="model.children.length > 0" style="opacity: 0;position: absolute;">
			<tree-menu v-for="(childs,indexs) of model.children" v-bind:model="childs" v-bind:key="indexs" v-if="model.children.length > 0"></tree-menu>
		</ul>
	</li>
</template>

<script>
	export default {
		name: "treeMenu",
		props: {
			model: ''
		},
		data() {
			return {}
		},
		methods: {
			show() {
				//重置
				for(let i = 0; i < document.getElementsByTagName('a').length; i++) {
					document.getElementsByTagName('a')[i].style.color = "#666";
					document.getElementsByTagName('a')[i].style.background = "#FFFFFF";
				}
				document.getElementById('u_' + this.model.uuid).style.color = '#FFFFFF';
				document.getElementById('u_' + this.model.uuid).style.background = '#2D8cF0';
				if(document.getElementById('u_' + this.model.uuid).nextSibling.style.opacity == '1') {
					document.getElementById('u_' + this.model.uuid).nextSibling.style.opacity = '0';
					setTimeout(() => {
						document.getElementById('u_' + this.model.uuid).nextSibling.style.display = 'none';
					}, 250)
					document.getElementById('u_' + this.model.uuid).nextSibling.style.position = 'absolute';
				} else {
					if(document.getElementById('u_' + this.model.uuid).nextSibling.children.length > 0) {
						document.getElementById('u_' + this.model.uuid).nextSibling.style.opacity = '1';
						document.getElementById('u_' + this.model.uuid).nextSibling.style.display = 'block';
						document.getElementById('u_' + this.model.uuid).nextSibling.style.position = 'relative';
					}
				}
				//修改按钮样式
				if(document.getElementById('ios_' + this.model.uuid)) {
					let updateClass = document.getElementById('ios_' + this.model.uuid);
					if(updateClass.className.indexOf('ivu-icon-ios-add') != -1) {
						updateClass.className = updateClass.className.replace('ivu-icon-ios-add', 'ivu-icon-ios-remove');
					} else {
						updateClass.className = updateClass.className.replace('ivu-icon-ios-remove', 'ivu-icon-ios-add');
					}
				}
				//自己修改的存储，用于监听
				this.resetSetItem('userDetail', JSON.stringify({
					userName: this.model.userName,
					nodeName: this.model.nodeName,
					levelName: this.model.levelName,
					createTime: this.model.createTime
				}));
			}
		},
	}
</script>

<style>
	.tree span {
		display: block;
		font-size: .9rem;
	}
	
	.tree img {
		display: block;
		margin: 0 auto;
		margin-bottom: 1rem;
		width: 150px;
	}
	
	.tree,
	.tree ul {
		padding-top: 20px;
		position: relative;
		-webkit-transition: all 0.5s;
		transition: all 0.5s;
		white-space: nowrap;
	}
	
	.tree li {
		/*float: left;*/
		display: inline-block;
		vertical-align: top;
		text-align: center;
		list-style-type: none;
		position: relative;
		padding: 20px 5px 0 5px;
		-webkit-transition: all 0.5s;
		transition: all 0.5s;
	}
	
	.tree li::before,
	.tree li::after {
		content: '';
		position: absolute;
		top: 0;
		right: 50%;
		border-top: 1px solid #ccc;
		width: 50%;
		height: 20px;
	}
	
	.tree li::after {
		right: auto;
		left: 50%;
		border-left: 1px solid #ccc;
	}
	
	.tree li:only-child::after,
	.tree li:only-child::before {
		display: none;
	}
	
	.tree li:only-child {
		padding-top: 0;
	}
	
	.tree li:first-child::before,
	.tree li:last-child::after {
		border: 0;
	}
	
	.tree li:last-child::before {
		border-right: 1px solid #ccc;
		border-radius: 0 5px 0 0;
	}
	
	.tree li:first-child::after {
		border-radius: 5px 0 0 0;
	}
	
	.tree ul::before {
		content: '';
		position: absolute;
		top: 0;
		left: 50%;
		border-left: 1px solid #ccc;
		width: 0;
		height: 20px;
	}
	
	.tree li a {
		border: 1px solid #ccc;
		padding: 10px;
		text-decoration: none;
		width: -webkit-min-content;
		width: -moz-min-content;
		width: min-content;
		color: #666;
		font-size: 1rem;
		display: inline-block;
		border-radius: 5px;
		-webkit-transition: all 0.5s;
		transition: all 0.5s;
		position: relative;
	}
	
	.tree li a {
		background: #FFFFFF;
	}
	
	.tree li a:hover,
	.tree li a:hover {
		background: #2D8cF0;
		border: 1px solid #2D8cF0;
		color: #fff;
	}
	/*.tree li a:hover+ul li::after,
	.tree li a:hover+ul li::before,
	.tree li a:hover+ul::before,
	.tree li a:hover+ul ul::before {
		border-color: #2D8cF0;
	}*/
</style>